<template>
  <div className="pieChart">
    <!--  柱形图  -->
    <div id="barChart" ref="barChart" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { querySalePriceCompTable } from '@/api/homePageNew/salesman'

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
])
export default {
  props: {
    queryId: {
      type: [Number, String],
      default: 0 || ''
    }
  },
  data() {
    return {
      product: [], // 2015 2016
      allPrice: []
    }
  },
  watch: {
    queryId() {
      this.querySalerRankTable()
    }
  },
  created() {
    this.querySalerRankTable()
  },
  methods: {
    querySalerRankTable() {
      this.allPrice = []
      const fid = window.sessionStorage.getItem('fuserId')
      querySalePriceCompTable({ queryId: this.queryId || fid }).then(res => {
        res.data.forEach(item => {
          this.allPrice.push([
            item.lastYearTime.split('-')[1],
            (item.lastYearPrice / 10000).toFixed(2), (item.thisYearPrice / 10000).toFixed(2)
          ])
        })
        const ite = res.data[0]
        this.product.push(ite.lastYearTime.split('-')[0], ite.thisYearTime.split('-')[0])
        this.drawLine()
      })
    },
    // 模板
    drawLine() {
      // // 基于准备好的dom，初始化echarts实例
      const barChart = echarts.init(document.getElementById('barChart'))
      // 绘制图表
      barChart.setOption({
        title: { text: this.$t('market.firstYearSales') }, // '上年销售额'
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        dataset: {
          source: [
            ['product', ...this.product],
            ...this.allPrice
          ]
        },
        // label: {
        //   show: true // 是否显示标签
        // },
        xAxis: { type: 'category' },
        yAxis: {
          name: this.$t('market.rmbWy'), // '人民币(万元)',
          type: 'value'
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }, {
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }]
      })
    }
  }
}
</script>

<style scoped lang="scss">
#barChart {
  width: 100%;
  height: 500px;
}
</style>
